{extend name="public:layout" /}
{block name="title"}添加扩展属性{/block}
{block name="head"}
{:widget('common/Form/validRes')}
<script src="/public/plugins/template/template.js"></script>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> <a href="{:url('index')}"> 路由规则列表</a></li>
                <li class="active">添加路由规则</li>
            </ol>
        </div>
        <div class="ibox-content">
            <form method="post" class="form-horizontal" id="form">
                <div class="form-group">
                    <div class="col-sm-12">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>路由规则</th>
                                <th>路由解析</th>
                                <th width="80">操作</th>
                            </tr>
                            </thead>
                            <tr>
                                <td><input type="text" id="ipt_item_key" class="form-control" /> </td>
                                <td><input type="text" id="ipt_item_value" class="form-control" /> </td>
                                <td><a class="btn btn-primary" href="javascript:;" onclick="addItem(this);">添加规则</a></td>
                            </tr>
                            <tbody id="itemList"></tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button class="btn btn-primary"
                                onclick="ajaxSubForm();" type="submit">
                            保存内容
                        </button>
                        <a href="{:url('index')}" class="btn btn-white">取消</a>
                        <span id="validError"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{literal}
<script id="itemListTpl" type="text/html">
    {{each list as value i}}
    <tr>
        <td><input type="text" class="form-control itemKey" name="item[{{i}}][item_key]" value="{{value.item_key}}" /></td>
        <td><input type="text" class="form-control" name="item[{{i}}][item_value]" value="{{value.item_value}}" /></td>
        <td><a href="javascript:;" onclick="del(this)">删除</a></td>
    </tr>
    {{/each}}
</script>
{/literal}
{/block}
{block name="script"}
<script type="text/javascript">
    var data={"list" : {$route}};
    var render = template('itemListTpl');
    $(function () {
        createHtml(data);
    })
    //添加属性值
    function addItem() {
        var item_key = $("#ipt_item_key").val();
        var item_value = $("#ipt_item_value").val();
        if(item_key==''){
            top.layer.alert('路由规则不能为空！');
            return false;
        }
        if(item_value==''){
            top.layer.alert('路由解析不能为空！');
            return false;
        }
        var isAdd = true;
        $.each(data.list, function(i, val){
            if(val.item_key == item_key){
                isAdd = false;
                return false;
            }
        });
        if(isAdd==false){
            top.layer.alert('该属性已存在！');
            return false;
        }
        data.list.push({"item_key" : item_key,"item_value" : item_value});
        createHtml(data);
        //重置输入框
        $("#ipt_item_key").val('');
        $("#ipt_item_value").val('');
    }
    //删除属性
    function del(obj) {
        var itemKeyObj = $(obj).closest('tr').find('.itemKey');
        var itemKey = itemKeyObj.val();
        $.each(data.list, function(i, val){
            if(val.item_key == itemKey){
                data.list.splice(i,1);
                return false;
            }
        });
        createHtml(data);
    }
    //编译模板
    function createHtml(data) {
        $('#itemList').html(render(data));
    }
</script>
{/block}